<template>
  <div class="login-page">
    <div class="login-page-bg form">
      <h3>图书管理</h3>
      <Form ref="from" :model="form" :rules="rules">
        <FormItem prop="username">
          <Input placeholder="请输入用户名" v-model="form.username"></Input>
        </FormItem>
        <FormItem prop="password">
          <Input placeholder="请输入密码" type="password" v-model="form.password"></Input>
        </FormItem>
<!--        <FormItem prop="type">
          <span>用户类型</span>
          <Select style="padding-left: 15px;width: 200px" v-model="form.type">
            <Option v-for="item in cityList" :value="item.value" v-model="item.value" :key="item.value">
              {{item.name }}
            </Option>
          </Select>
        </FormItem>-->
        <Button style="width: 100%" type="primary" @click="submit">登录</Button>
        <div class="zhuce">
          <p>尚未拥有账户？ <a href="javascript:void(0);" @click="add">注册</a></p>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>

import axios from "axios";
import axiosInstance from "@/api/axios";
import user from "@/api/user";

export default {
  name: "Login",
  data() {
    return {
      form: {
        username: 'admin',
        password: '123456',
        type: ''
      },
      rules: {
        username: [{required: true, message: '请输入账号'}],
        password: [{required: true, message: '请输入密码'}],
        type: [{required: true, message: '请选择用户类型'}]
      },
      /*cityList: [
        {
          name: '管理员',
          value: "管理员"
        },
        {
          name: '读者',
          value: "管理员"
        }
      ]*/


    }
  },
  methods: {
    submit() {
      this.$Message.loading('正在登陆！！！')
      this.$refs['from'].validate(valid => {
        if (valid) {
          this.http.post("/login",this.qs.stringify(this.form)).then(res => {
            if(res.data){
              this.$store.commit("setUser",res.data)
                if (res.data.state==="正常"){
                  this.$Message.success('登陆成功')
                  if(res.data.type==='管理员'){
                    this.$router.push("/adduser")
                  }else if (res.data.type==='读者') {
                    this.$router.push("/index_user")
                  }

                }
                if (res.data.state==="异常"){
                  this.$router.push("/")
                  this.$Message.error('账号异常，请联系管理员')
                }
              }
          })
        }
      })
    },

    add() {

    }
  }
}
</script>

<style scoped>
.login-page {
  height: 100%;
  background-size: cover;
}

.login-page-bg {
  position: absolute;
  top: 30%;
  left: 35%;
  bottom: 30%;
  right: 35%;
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 25px;
  text-align: center;
  color: #666666;
  padding-right: 50px;
  box-shadow: 5px 5px 5px 5px #cccccc;
}

.form {
  padding-top: 15px;
  padding-left: 45px;
}

a {
  padding-top: 50px;
  color: #2d8cf0;
  background: 0 0;
  text-decoration: none;
  outline: 0;
  cursor: pointer;
  transition: color .2s ease;
}

.zhuce {
  padding-top: 20px;
}
</style>
